<script lang="ts">
import { defineComponent, reactive, ref, useAttrs } from "vue";
import {
  useMessage,
  NButton,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NSelect,
  NDatePicker,
  NSwitch,
  NSpace,
  NGrid,
  NFormItemGi,
  NTransfer,
  NTimePicker,
  NInputNumber,
  NSlider,
  FormInst,
} from "naive-ui";

import { DialogProps } from "@/type";
import { omit } from "lodash";

export default defineComponent({
  name: "h-modal",
  components: {
    NModal,
    NButton,
    NForm,
    NFormItem,
    NInput,
    NSelect,
    NDatePicker,
    NSwitch,
    NSpace,
    NGrid,
    NFormItemGi,
    NTransfer,
    NTimePicker,
    NInputNumber,
    NSlider,
  },
  setup: () => {
    const formValue = reactive({}) as any;
    const formRef = ref<FormInst | null>(null);
    const { dialogshow, service, updataRow, columns, adddata } =
      useAttrs() as DialogProps;
    const message = useMessage();

    return {
      message,
      dialogshow,
      updataRow,
      service,
      columns,
      adddata,
      formValue,
      formRef,
    };
  },

  watch: {
    data(newVal, oldVal) {
      this.formValue = newVal;
    },
  },
  methods: {
    onCloseBtn() {
      this.formValue = {};
      this.dialogshow?.(false);
      console.log("关闭按钮" + this.formValue);
    },
    onSumbitBtn() {
      if (this.dialogAttrs.row) {
        console.log("我是编辑按钮");
        this.updataRow?.(this.formValue);
        this.onCloseBtn();
        //编辑数据
      } else {
        //添加数据
        this.adddata?.(this.formValue);
        this.onCloseBtn();
        console.log("添加按钮");
      }
      console.log("提交按钮");
      console.log("formValue=>", this.formValue);
    },
  },

  computed: {
    dialogAttrs() {
      const { title, row, ...otherAttrs } = this.$attrs as DialogProps;
      this.formValue = JSON.parse(JSON.stringify(row ?? {}));
      console.log("11111111111111formValue=>", this.formValue);
      return omit({
        title: `${row ? "编辑" : "增添"}`,
        // title: `${ row ? "编辑数据" : "增添数据"}`,
        row,
        ...otherAttrs,
      });
    },
    columnsProps() {
      const { columns } = this.$attrs as DialogProps;
      return columns;
    },
  },
});
</script>
<template>
  <n-modal
    v-bind="dialogAttrs"
    preset="dialog"
    @close="onCloseBtn"
    :showIcon="false"
  >
    <template #header>
      <slot name="header">
        {{ dialogAttrs.title }}
      </slot>
    </template>

    <div class="modal-default">
      <n-form
        ref="formRef"
        :model="formValue"
        label-placement="left"
        label-width="100px"
        require-mark-placement="right-hanging"
      >
        <n-form-item
          v-for="({title, key, category, formItemProps}, index) in (columnsProps as any)"
          :key="`key_${index}`"
          :path="key"
          :label="`${title}:`"
          style="width: 100%;"
        >
          <n-input
            v-if="category === 'input'"
            v-bind="formItemProps"
            v-model:value="formValue[`${key}`]"
            style="width: 100%;"
          />
          <n-select
            v-if="category === 'select'"
            v-bind="formItemProps"
            v-model:value="formValue[`${key}`]"
            filterable
            style="width: 100%;"
          />
          <n-switch
            v-if="category === 'switch'"
            v-bind="formItemProps"
            v-model:value="formValue[`${key}`]"
           
          />
          <n-date-picker
            v-if="category === 'datetime'"
            v-bind="formItemProps"
            v-model:formatted-value="formValue[`${key}`]"
            value-format="yyyy-MM-dd HH:mm:ss"
            clearable
            style="width: 100%;"
          />
          <n-date-picker
            v-if="category === 'daterange'"
            v-bind="formItemProps"
            v-model:formatted-value="formValue[`${key}`]"
            clearable
            style="width: 100%;"
          />
          <!-- <n-button
            text
            tag="a"
            v-if="category === 'button'"
            v-bind="formItemProps"
            v-model:value="formValue[`${key}`]"
            type="primary"
          /> -->
        </n-form-item>
      </n-form>
    </div>

    <template #action>
      <div class="modal-footer">
        <n-button type="default" @click="onCloseBtn">取消</n-button>
        <n-button type="primary" @click="onSumbitBtn">提交</n-button>
      </div>
    </template>
  </n-modal>
</template>
<style>
.n-button {
  margin: 10px;
  cursor: pointer;
}
.modal-default {
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 10px;
}
</style>
